import { NotificationService, BullySubjectService } from 'app/shared/service';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { UploadFile } from 'ng-zorro-antd';
import { Observable, Observer } from 'rxjs';
import { DisseminationService } from '../../dissemination-management.service';
@Component({
    selector: 'itmp-add-graphic',
    templateUrl: './add-graphic.component.html',
    styleUrls: ['./add-graphic.component.css']
})
export class AddGraphicComponent implements OnInit {
    isOkLoading = false;
    @Input() visible = false;
    @Input() title = '';
    @Input() dataId: string;
    @Input() selectionList: any;
    @Input() selectData: any;
    @Output() visibleChange = new EventEmitter<boolean>();
    @Output() getData = new EventEmitter();
    // 初始化表单
    @Input()
    set manageGraphic(value: any) {
        this.selectData = value;
        const data = {
            name: value ? value.name : null,
            type: value ? value.type : null,
            height: value ? value.height : null,
            width: value ? value.width : null,
            url: value ? value.url : null
        };
        this.graphicData = data;
        this.avatarUrl = value ? value.url : null;
        this.formDataInit(data);
    }
    graphicInfoForm: FormGroup;
    loading = false;
    avatarUrl: string;
    graphicData: any;
    constructor(private fb: FormBuilder, private msg: NotificationService, public diss: DisseminationService) {
        this.graphicInfoForm = this.fb.group({
            name: [{ value: null, disabled: false }, Validators.required],
            type: [{ value: null, disabled: false }, Validators.required],
            height: [{ value: null, disabled: false }, Validators.required],
            width: [{ value: null, disabled: false }, Validators.required],
            url: [{ value: null, disabled: false }, Validators.required]
        });
    }
    private formDataInit(value: any) {
        this.graphicInfoForm.setValue(value);
        // title.split('_')[0] === 'Edit'?true:false
        if (this.title.split('_')[0] === 'Edit') {
            this.graphicInfoForm.get('type').disable();
            // this.graphicInfoForm.get('id').disable();
        }
    }
    submitForm(): void {
        // tslint:disable-next-line:forin
        for (const i in this.graphicInfoForm.controls) {
            if (this.graphicInfoForm.controls.hasOwnProperty(i)) {
                this.graphicInfoForm.controls[i].markAsDirty();
                this.graphicInfoForm.controls[i].updateValueAndValidity();
            }
        }
    }
    close(e?) {
        if (this.title === 'Add_Graphics') {
            const { url } = this.graphicInfoForm.value;
            if (url && !e) {
                this.deleteOriginImg(url);
            }
        }
        this.visible = false;
        this.visibleChange.emit(this.visible);
    }

    // cancel 按钮
    handleCancel() {
        this.close();
    }

    // 确定按钮
    handleOk() {
        this.submitForm();
        if (this.graphicInfoForm.valid) {
            const manageGraphic = this.graphicInfoForm.value;
            this.isOkLoading = true;
            if (this.title === 'Add_Graphics') {
                const params = {
                    ...manageGraphic,
                    id: this.dataId
                };
                this.diss.createGraphic(params).subscribe(res => {
                    this.isOkLoading = false;
                    if (res.messagecode === '900101') {
                        this.msg.notify({ type: 'warning', path: 'DisseminationManagement.Graphics.repeat_Graphics' });
                        return;
                    }
                    this.close(true);
                    this.getData.emit();
                });
            } else {
                const params = {
                    ...manageGraphic,
                    id: this.selectData.id,
                    type: this.selectData.type
                };
                this.diss.updateGraphic(params).subscribe(res => {
                    this.close(true);
                    this.isOkLoading = false;
                    this.getData.emit();
                });
            }
        }
    }
    ngOnInit() {}
    // 获取上传的图片的数据
    getImgData(data) {
        this.graphicData = { ...this.graphicData, ...data };
        this.graphicInfoForm.setValue(this.graphicData);
    }
    // 删除替换的图片
    deleteOriginImg(url) {
        this.diss.deleteOriginImg(url).subscribe(res => {});
    }
    // 获取上传图片的状态
    getUploadStatus(status) {
        switch (status) {
            case 'type': {
                this.msg.notify({ type: 'warning', path: 'DisseminationManagement.Graphics.validate_format' });
                break;
            }
            case 'size': {
                this.msg.notify({ type: 'warning', path: 'DisseminationManagement.Graphics.validate_size' });
                break;
            }
            case 'dimension': {
                this.msg.notify({ type: 'warning', path: 'DisseminationManagement.Graphics.validate_dimension' });
                break;
            }
        }
    }
}
